<template>
  <div>
    <html>
    <body>
    <head>
      <meta charset="utf-8">
      <title>{{info.title}}</title>
      <meta name="keywords" :content="info.keyword">
      <meta name="description" :content="info.summary">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <header
      :class="isVisible?'header-navigation slideDown':'header-navigation slideUp'"
      id="header"
      :style="{height: '60px'}"
    >
      <nav>
        <div class="logo">
          <el-image v-if="info.logoPhoto" style="width: 35px;height: 35px; vertical-align: middle; margin-top: -6px;"
                    :src="info.logoPhoto"></el-image>
          <router-link to="/">
            <a href="javascript:void(0);" v-if="info.name">{{ info.name }}</a>
          </router-link>
        </div>

        <h2 id="mnavh" @click="openHead" :class="showHead?'open':''">
          <span class="navicon"></span>
        </h2>

        <ul id="starlist" :style="showHead?'display: block':''">
          <li v-for="webNavbar in webNavbarList" :key="webNavbar.uid" @click="clickWebNavbar(webNavbar)">
            <!--判断是否有下拉菜单-->
            <span v-if="webNavbar.childWebNavbar && webNavbar.childWebNavbar.length > 0">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link"
                      :style="{color: (saveTitle == webNavbar.url || saveTitle == webNavbar.name) ? '#007fff': webNavbar.color}">
                  {{ webNavbar.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="childWebNavbar in webNavbar.childWebNavbar" :key="childWebNavbar.uid">
                      <router-link :to="childWebNavbar.url" v-if="childWebNavbar.isJumpExternalUrl == 0">
                        <span @click="openHead" :style="{color: childWebNavbar.color}">{{ childWebNavbar.name }}</span>
                      </router-link>
                      <a v-if="childWebNavbar.isJumpExternalUrl == 1" :href="childWebNavbar.url"
                         :style="{color: childWebNavbar.color}" target="_blank">{{ childWebNavbar.name }}</a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
          </span>

            <!--没有有下拉菜单-->
            <span v-else>
            <router-link :to="webNavbar.url" v-if="webNavbar.isJumpExternalUrl == 0">
                <span @click="openHead"
                      :style="{color: (saveTitle == webNavbar.url || saveTitle == webNavbar.name) ? '#007fff': webNavbar.color}"
                      :class="[(saveTitle == webNavbar.url || saveTitle == webNavbar.name) ? 'title' : '']">{{
                    webNavbar.name
                  }}</span>
            </router-link>
            <a v-if="webNavbar.isJumpExternalUrl == 1" :href="webNavbar.url" target="_blank"
               :class="[saveTitle == webNavbar.url || saveTitle == webNavbar.name ? 'title' : '']">{{
                webNavbar.name
              }}</a>
          </span>
          </li>
        </ul>

        <el-dropdown @command="handleCommand" class="create">
        <span class="el-dropdown-link">
          <el-button v-if="showCreateRankMember" type="primary" size="small" icon="el-icon-edit"  :disabled="!authCode.ADD_RANK_MEMBER && !authCode.ADD_MOMENT"
                     class="createRankMember">创作</el-button>
        </span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="showCreateRankMember && authCode.ADD_RANK_MEMBER" command="createRankMember">创建活动</el-dropdown-item>
            <el-dropdown-item v-if="authCode.ADD_MOMENT" command="userMoment">发贴</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown @command="handleCommand" class="notice">
          <span class="el-dropdown-link">
              <i class="el-icon-bell">
                <el-badge is-dot style="margin-top: -25px;" class="item" :value="userReceiveMemberCommentCount"
                          :hidden="(userReceiveMemberCommentCount + userReceiveMomentCommentCount + userReceiveWatchCount + userReceivePraiseCount + userReceiveSystemCount + userReceiveMessageCount + userReceiveCollectCount) == 0"></el-badge>
              </i>
          </span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="memberComment">
              活动评论
              <el-badge is-dot :value="userReceiveMemberCommentCount" class="item"
                        :hidden="userReceiveMemberCommentCount == 0"></el-badge>
            </el-dropdown-item>
            <el-dropdown-item command="momentComment">
              动态评论
              <el-badge is-dot :value="userReceiveMomentCommentCount" class="item"
                        :hidden="userReceiveMomentCommentCount == 0"></el-badge>
            </el-dropdown-item>
            
            <el-dropdown-item command="system">
              系统通知
              <el-badge is-dot :value="userReceiveSystemCount" class="item"
                        :hidden="userReceiveSystemCount == 0"></el-badge>
            </el-dropdown-item>
            
            <el-dropdown-item command="message" v-if="showChat">
              私信
              <el-badge is-dot :value="userReceiveMessageCount" class="item"
                        :hidden="userReceiveMessageCount == 0"></el-badge>
            </el-dropdown-item>
          </el-dropdown-menu>

        </el-dropdown>

        <el-dropdown @command="handleCommand" class="userInfoAvatar" trigger="hover">
        <span class="el-dropdown-link">
            <img v-if="!isLogin" style="width: 58px;height: 30px;" src="../../static/images/login.png">
            <img :class="userInfo.userTag > 0 ?'vip-color':''" v-if="isLogin&&userInfo.photoUrl!=undefined"
                 :src="userInfo.photoUrl" onerror="onerror=null;src=defaultAvatar">
            <img v-if="isLogin&&userInfo.photoUrl==undefined"
                 :src="defaultAvatar">
            <span class="vip-text-home pointer" v-if="userInfo.userTag > 0">v</span>
        </span>

          <el-dropdown-menu slot="dropdown" class="userDropdownMenu">

            <el-dropdown-item command="login" v-show="!isLogin" class="userDropdownMenuItem">
              <el-card :body-style="{ padding: '20px' }" style="width: 280px" class="cardStyle" v-if="!isLogin">
                <el-row class="loginText">
                  <span>登录网站，可立即获得以下权益：</span>
                </el-row>
                <el-row class="loginSummary" :span="24">
                  <el-col :span="12">
                    <span class="iconfont">&#xe606;</span>&nbsp;收藏有用内容
                  </el-col>
                  <el-col :span="12">
                    <span class="iconfont">&#xe606;</span>&nbsp;阅读优质专栏
                  </el-col>
                </el-row>
                <el-row class="loginSummary" :span="24">
                  <el-col :span="12">
                    <span class="iconfont">&#xe606;</span>&nbsp;进行评论互动
                  </el-col>
                  <el-col :span="12">
                    <span class="iconfont">&#xe606;</span>&nbsp;提升成长等级
                  </el-col>
                </el-row>
                <el-row>
                  <el-button type="primary" style="width: 100%; margin-top: 20px;">立即登录</el-button>
                </el-row>
              </el-card>

            </el-dropdown-item>
            <el-dropdown-item command="goUserCenter" v-show="isLogin">我的主页</el-dropdown-item>
            <el-dropdown-item command="goUserInfo" v-show="isLogin">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout" v-show="isLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </nav>
    </header>

    <WebNotice></WebNotice>

    <!--登录框-->
    <LoginBox v-if="showLogin" @closeLoginBox="closeLoginBox"></LoginBox>

    <el-drawer
      :append-to-body="dialogFormVisible"
      :modal-append-to-body="false"
      @close="closePersonCenter"
      :show-close="true"
      :visible.sync="drawer"
      :size="drawerSize"
      :with-header="false">

      <el-tabs type="border-card" tab-position="left" v-model="activeName"
               style="margin-top: 0px; height: 94%; overflow-y: scroll" @tab-click="handleClick">
        <el-tab-pane label="个人中心" name="个人中心">
          <span slot="label"><i class="el-icon-user-solid"></i> 个人中心</span>
          <el-form label-position="left" :model="userInfo" label-width="100px" :rules="rules" ref="userInfo">
            <el-form-item label="头像" :label-width="labelWidth">

              <div class="imgBody" v-if="userInfo.photoUrl">
                <i class="el-icon-error inputClass" v-show="icon" @click="deletePhoto('user')"
                   @mouseover="icon = true"></i>
                <img @mouseover="icon = true" @mouseout="icon = false" v-bind:src="userInfo.photoUrl"/>
              </div>

              <div v-else class="uploadImgBody" @click="checkPhoto">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </el-form-item>

            <el-form-item label="昵称" :label-width="labelWidth" prop="nickname">
              <el-input v-model="userInfo.nickname" style="width: 100%"></el-input>
            </el-form-item>


            <el-form-item label="性别" :label-width="labelWidth">
              <el-radio v-for="gender in genderDictList" :key="gender.uid" v-model="userInfo.gender"
                        :label="parseInt(gender.dictValue)" border size="medium">{{ gender.dictLabel }}
              </el-radio>
            </el-form-item>

            <el-form-item label="邮件通知" :label-width="labelWidth">
              <el-radio v-for="item in yesNoDictList" :key="item.uid" v-model="userInfo.startEmailNotification"
                        :label="parseInt(item.dictValue)" border size="medium">{{ item.dictLabel }}
              </el-radio>
            </el-form-item>

            <el-form-item label="编辑器" :label-width="labelWidth">
              <el-radio v-for="item in editorModalDictList" :key="item.uid" v-model="userInfo.editorModel"
                        :label="parseInt(item.dictValue)" border size="medium">{{ item.dictLabel }}
              </el-radio>
            </el-form-item>

            <el-form-item label="邮箱" :label-width="labelWidth" prop="email">
              <el-input v-model="userInfo.email" style="width: 100%"></el-input>
            </el-form-item>

            <!--          <el-form-item label="QQ号" :label-width="labelWidth" prop="qqNumber">-->
            <!--            <el-input v-model="userInfo.qqNumber" style="width: 100%"></el-input>-->
            <!--          </el-form-item>-->

            <el-form-item label="职业" :label-width="labelWidth" prop="occupation">
              <el-input v-model="userInfo.occupation" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="简介" :label-width="labelWidth" prop="summary">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5}"
                placeholder="请输入内容"
                style="width: 100%"
                v-model="userInfo.summary">
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('editUser')">保 存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>


        <el-tab-pane label="账号绑定" name="账号绑定">
          <span slot="label"><i class="el-icon-s-flag"></i> 账号绑定</span>
          <div :style="{'height': minHeight - 65 + 'px'}" style="width: 100%; overflow:auto;">

            <el-table :data="accountList"
                      style="width: 100%">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>

              <el-table-column label="渠道" width="100" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.source }}</span>
                </template>
              </el-table-column>

              <el-table-column label="用户" width="150" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.nickname }}</span>
                </template>
              </el-table-column>

              <el-table-column label="绑定时间" width="160" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.bindTime }}</span>
                </template>
              </el-table-column>
            </el-table>

            <div style="margin-top: 5px; margin-bottom: 5px;">你还可以绑定以下第三方帐号进行登录</div>
            <el-tooltip content="码云" placement="bottom" v-if="!loginType.gitee">
              <el-button type="danger" circle @click="goBind('gitee')" :disabled="loginType.gitee">
                <span class="iconfont">&#xe602;</span>
              </el-button>
            </el-tooltip>

            <el-tooltip content="Github" placement="bottom" v-if="!loginType.github">
              <el-button type="info" circle @click="goBind('github')" :disabled="loginType.github">
                <span class="iconfont">&#xe64a;</span>
              </el-button>
            </el-tooltip>

            <el-tooltip content="QQ" placement="bottom" v-if="!loginType.qq">
              <el-button type="primary" circle @click="goBind('qq')" :disabled="loginType.qq">
                <span class="iconfont">&#xe601;</span>
              </el-button>
            </el-tooltip>

            <el-tooltip content="微信公众号" placement="bottom" v-if="!loginType.wechat">
              <el-button type="success" circle @click="goBind('wechat')" :disabled="loginType.wechat">
                <span class="iconfont">&#xe66f;</span>
              </el-button>
            </el-tooltip>

            <el-tooltip content="微信小程序" placement="bottom" v-if="!loginType.mini">
              <el-button type="success" circle @click="goBind('mini')" :disabled="loginType.mini">
                <span class="iconfont">&#xe668;</span>
              </el-button>
            </el-tooltip>

            <el-tooltip content="微信" placement="bottom" v-if="!loginType.personWechat">
              <el-button type="success" circle @click="goBind('person_wechat')" :disabled="loginType.personWechat">
                <span class="iconfont">&#xe66f;</span>
              </el-button>
            </el-tooltip>

          </div>
        </el-tab-pane>

        
        <el-tab-pane v-if="showCreateRankMember" label="我发起的活动" name="我发起的活动">
          <span slot="label"><i class="el-icon-s-order"></i> 我发起的活动</span>

          <div class="filter-container" style="margin: 10px 0 10px 0;">
            <el-form :inline="true" style="margin-bottom: 8px;">
              <el-input
                @input="getRankMemberList(true)"
                size="mini"
                clearable
                class="filter-item"
                style="width: 120px;"
                v-model="queryParams.keyword"
                placeholder="请输入博客名"
              ></el-input>

              <el-select @change="getRankMemberList(true)" size="mini" v-model="queryParams.publishKeyword" clearable
                         placeholder="是否发布" style="width:100px">
                <el-option
                  v-for="item in memberPublishDictList"
                  :key="item.uid"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>

              <el-select @change="getRankMemberList(true)" size="mini" v-model="queryParams.auditStatusKeyword" clearable
                         placeholder="审核状态" style="width:110px">
                <el-option
                  v-for="item in auditStatusDictList"
                  :key="item.uid"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form>

          </div>

          <div :style="{'height': minHeight - 65 + 'px'}" style="width: 100%; overflow:auto;">
            <el-timeline>
              <div
                v-for="item in userRankMemberList"
                :key="item.uid"
                class="myArticle"
              >
                <el-timeline-item :timestamp="item.createTime" placement="top">
                  <el-card>

                    <el-row :gutter="24">
                      <el-col :span="(item.photoList && item.photoList.length > 0)?12:0">
                          <span class="rankMemberPic" @click="goToInfo(item)">
                            <a href="javascript:void(0);" title>
                              <img v-if="item.photoList && item.photoList.length > 0 " v-lazy="item.photoList[0]"
                                   :key="item.photoList[0]" alt>
                            </a>
                          </span>
                      </el-col>

                      <el-col :span="(item.photoList && item.photoList.length > 0)?12:24">
                        <div style="height: 70px;">
                          <p class="membertext" style="font-weight: bold; cursor: pointer;" @click="goToInfo(item)">
                            {{ item.title }}</p>
                        </div>
                      </el-col>

                    </el-row>

                    <div class="rankMemberInfo">
                      <ul>
                        <li class="author">
                          <span class="iconfont">&#xe60f;</span>
                          <a href="javascript:void(0);" @click="goToAuthor(item.author)">{{ item.author }}</a>
                        </li>
                        <li class="lmname" v-if="item.rank">
                          <span class="iconfont">&#xe603;</span>
                          <a
                            href="javascript:void(0);"
                            @click="goToList(item.rank.uid)"
                          >{{ item.rank.rankName }}</a>
                        </li>
                        <li class="view">
                          <span class="iconfont">&#xe8c7;</span>
                          <span>{{ item.clickCount }}</span>
                        </li>
                        
                      </ul>
                    </div>

                    <div style="margin-top: 5px; float: left">
                      <el-tag v-if="item.isPublish==1" type="success" style="font-size: 12px">已上架</el-tag>
                      <el-tag v-if="item.isPublish==0" type="info" style="font-size: 12px">未发布</el-tag>

                      <el-tag v-if="item.auditStatus==0" type="info" style="font-size: 12px">待审批</el-tag>
                      <el-tag v-if="item.auditStatus==1" content="预览" type="danger" style="font-size: 12px">
                        <el-tooltip :disabled="item.length <= 10" class="item" placement="top">
                          <div slot="content">{{ item.rejectReason }}</div>
                          <div>审核未通过</div>
                        </el-tooltip>
                      </el-tag>
                      <el-tag v-if="item.auditStatus==2" type="success" style="font-size: 12px">审核已通过</el-tag>
                    </div>

                    <div class="operation">
                      <el-row :gutter="24">
                        <el-tooltip v-if="item.isPublish == '0' && item.auditStatus == '2'" class="item" effect="dark"
                                    content="发布" placement="top">
                          <el-button circle type="success" size="small" icon="el-icon-document-checked"
                                     @click="handlePublish(item)"></el-button>
                        </el-tooltip>

                        <el-tooltip v-if="item.isPublish== '1' && item.auditStatus == '2'" class="item" effect="dark"
                                    content="下架" placement="top">
                          <el-button circle type="danger" size="small" icon="el-icon-document-delete"
                                     @click="handlePublish(item)"></el-button>
                        </el-tooltip>

                        <el-tooltip
                          v-if="(item.auditStatus == '0'  && item.isPublish == '0') || (item.auditStatus == '1')"
                          class="item" effect="dark" content="提交审核" placement="top">
                          <el-button circle type="success" size="small" icon="el-icon-user"
                                     @click="handleAudit(item)"></el-button>
                        </el-tooltip>

                        <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                          <el-button circle type="primary" size="small" icon="el-icon-edit"
                                     @click="createRankMember(true, item)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="预览" placement="top">
                          <el-button circle type="info" size="small" icon="el-icon-search"
                                     @click="goToInfo(item)"></el-button>
                        </el-tooltip>
                        <!-- <el-tooltip v-if="item.auditStatus== '2' && item.isPublish == '1'" class="item" effect="dark"
                                    content="导出Markdown" placement="top">
                          <el-button circle type="warning" size="small" icon="el-icon-download"
                                     @click="handleDownload(item, 'rankMember')"></el-button>
                        </el-tooltip> -->
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                          <el-button circle type="danger" size="small" icon="el-icon-delete"
                                     @click="handleDeleteRankMember(item)"></el-button>
                        </el-tooltip>
                      </el-row>
                    </div>

                  </el-card>
                </el-timeline-item>

              </div>
              <span v-if="isEnd && userRankMemberList.length == 0">
                <el-empty description="空空如也，快去创作吧~" image=""></el-empty>
              </span>

            </el-timeline>

            <div class="isEnd">
              <div class="loadContent" @click="loadMore('rankMember')" v-if="!isEnd&&!loading">查看更多</div>
              <div class="lds-css ng-scope" v-if="!isEnd&&loading">
                <div style="width:100%;height:100%" class="lds-facebook">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <span v-if="isEnd  &&  userRankMemberList.length > 0 ">我也是有底线的~</span>
            </div>

          </div>
        </el-tab-pane>

        <el-tab-pane v-if="showCreateRankMember" label="报名名单" name="报名名单">
          <span slot="label"><i class="el-icon-s-order"></i> 报名名单</span>

          <div class="filter-container" style="margin: 10px 0 10px 0;">
            <el-form :inline="true" style="margin-bottom: 8px;">
              <el-input
                @input="listOrderOfMyRankMember(true)"
                size="mini"
                clearable
                class="filter-item"
                style="width: 120px;"
                v-model="queryParams.keyword"
                placeholder="请输入活动名"
              ></el-input>

            </el-form>

          </div>

          <div :style="{'height': minHeight - 65 + 'px'}" style="width: 100%; overflow:auto;">
            <el-timeline>
              <div
                v-for="item in myRankMemberOrderList"
                :key="item.uid"
                class="myArticle"
              >
                <el-timeline-item :timestamp="item.createTime" placement="top">
                  <el-card>

                    <el-row :gutter="24">
                     
                      <el-col>
                        <div style="height: 70px;">
                          <p class="membertext" style="font-weight: bold; cursor: pointer;" @click="goToInfo(item)">
                            {{ item.title }}</p>
                        </div>
                      </el-col>

                    </el-row>
                    <el-row v-if="item.applyUserName" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">姓名：</span>
                        <span class="price l blue bold">{{ item.applyUserName }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.idCard" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">身份证号：</span>
                        <span class="price l blue bold">{{ item.idCard }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.gender" >
                      <span v-for="gender in genderDictList" :key="gender.uid">
              
                        <span v-if="item.gender == gender.dictValue" style="ont-size: 18px; color: #0787e2;">
                          <span class="price l blue bold">性别：</span>
                          <span class="price l blue bold">{{ gender.dictLabel }}</span>
                          
                        </span>
                      </span>
                    </el-row>
                    <el-row v-if="item.age" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">年龄：</span>
                        <span class="price l blue bold">{{ item.age }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.weChat" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">微信：</span>
                        <span class="price l blue bold">{{ item.weChat }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.phone" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">手机：</span>
                        <span class="price l blue bold">{{ item.phone }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.applyUserNum" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">报名人数：</span>
                        <span class="price l blue bold">{{ item.applyUserNum }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.remark" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">备注：</span>
                        <span class="price l blue bold">{{ item.remark }}</span>
                        
                      </span>
                    </el-row>

                    <div class="rankMemberInfo">
                      <ul>
                        <li class="author" v-if="item.author">
                          <span class="iconfont">&#xe60f;</span>
                          <a href="javascript:void(0);" @click="goToAuthor(item.author)">{{ item.author }}</a>
                        </li>
                      </ul>
                    </div>
                    <div style="margin-top: 5px; float: left">
                      <el-tag v-if="item.orderStatus==9" type="success" style="font-size: 12px">报名成功</el-tag>
                      <el-tag v-if="item.orderStatus==3" type="info" style="font-size: 12px">已取消</el-tag>

                    </div>
                    <div class="operation">
                      <el-row :gutter="24">
                        <el-tooltip class="item" effect="dark"
                                    content="取消此人报名" placement="top">
                          <el-button circle type="danger" size="small" icon="el-icon-document-delete"
                                     @click="organizerCancelOrder(item)"></el-button>
                        </el-tooltip>
                      </el-row>
                    </div>

                  </el-card>
                </el-timeline-item>

              </div>
              <span v-if="isEnd && myRankMemberOrderList.length == 0">
                <el-empty description="暂无人报名" image=""></el-empty>
              </span>

            </el-timeline>

            <div class="isEnd">
              <div class="loadContent" @click="loadMore('myRankMemberOrder')" v-if="!isEnd&&!loading">查看更多</div>
              <div class="lds-css ng-scope" v-if="!isEnd&&loading">
                <div style="width:100%;height:100%" class="lds-facebook">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <span v-if="isEnd  &&  myRankMemberOrderList.length > 0 ">我也是有底线的~</span>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane v-if="showCreateRankMember" label="我的报名" name="我的报名">
          <span slot="label"><i class="el-icon-s-order"></i> 我的报名</span>

          <div class="filter-container" style="margin: 10px 0 10px 0;">
            <el-form :inline="true" style="margin-bottom: 8px;">
              <el-input
                @input="listMyOrder(true)"
                size="mini"
                clearable
                class="filter-item"
                style="width: 120px;"
                v-model="queryParams.keyword"
                placeholder="请输入活动名"
              ></el-input>

            </el-form>

          </div>

          <div :style="{'height': minHeight - 65 + 'px'}" style="width: 100%; overflow:auto;">
            <el-timeline>
              <div
                v-for="item in myOrderList"
                :key="item.uid"
                class="myArticle"
              >
                <el-timeline-item :timestamp="item.createTime" placement="top">
                  <el-card>

                    <el-row :gutter="24">
                     
                      <el-col>
                        <div style="height: 70px;">
                          <p class="membertext" style="font-weight: bold; cursor: pointer;" @click="goToInfo(item)">
                            {{ item.title }}</p>
                        </div>
                      </el-col>

                    </el-row>
                    <el-row v-if="item.applyUserName" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">姓名：</span>
                        <span class="price l blue bold">{{ item.applyUserName }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.idCard" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">身份证号：</span>
                        <span class="price l blue bold">{{ item.idCard }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.gender" >
                      <span v-for="gender in genderDictList" :key="gender.uid">
              
                        <span v-if="item.gender == gender.dictValue" style="ont-size: 18px; color: #0787e2;">
                          <span class="price l blue bold">性别：</span>
                          <span class="price l blue bold">{{ gender.dictLabel }}</span>
                          
                        </span>
                      </span>
                    </el-row>
                    <el-row v-if="item.age" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">年龄：</span>
                        <span class="price l blue bold">{{ item.age }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.weChat" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">微信：</span>
                        <span class="price l blue bold">{{ item.weChat }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.phone" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">手机：</span>
                        <span class="price l blue bold">{{ item.phone }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.applyUserNum" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">报名人数：</span>
                        <span class="price l blue bold">{{ item.applyUserNum }}</span>
                        
                      </span>
                    </el-row>
                    <el-row v-if="item.remark" >
                      <span style="ont-size: 18px; color: #0787e2;">
                        <span class="price l blue bold">备注：</span>
                        <span class="price l blue bold">{{ item.remark }}</span>
                        
                      </span>
                    </el-row>
                    <div style="margin-top: 5px; float: left">
                      <el-tag v-if="item.orderStatus==9" type="success" style="font-size: 12px">报名成功</el-tag>
                      <el-tag v-if="item.orderStatus==3" type="info" style="font-size: 12px">被举办方取消报名</el-tag>

                    </div>
                    <div class="operation">
                      <el-row :gutter="24">
                        <el-tooltip class="item" effect="dark"
                                    content="取消报名" placement="top">
                          <el-button circle type="danger" size="small" icon="el-icon-document-delete"
                                     @click="cancelOrder(item)"></el-button>
                        </el-tooltip>
                      </el-row>
                    </div>

                  </el-card>
                </el-timeline-item>

              </div>
              <span v-if="isEnd && myOrderList.length == 0">
                <el-empty description="空空如也，快去参加活动~" image=""></el-empty>
              </span>

            </el-timeline>

            <div class="isEnd">
              <div class="loadContent" @click="loadMore('myRankMemberOrder')" v-if="!isEnd&&!loading">查看更多</div>
              <div class="lds-css ng-scope" v-if="!isEnd&&loading">
                <div style="width:100%;height:100%" class="lds-facebook">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <span v-if="isEnd  &&  myOrderList.length > 0 ">我也是有底线的~</span>
            </div>

          </div>
        </el-tab-pane>

        <el-tab-pane label="我的评论(活动)" name="我的评论(活动)">
          <span slot="label"><i class="el-icon-message-solid"></i> 我的评论(活动)</span>
          <div :style="{'height': minHeight - 65 + 'px'}" style="width: 100%; overflow:auto;">
            <el-timeline>
              <el-timeline-item v-for="comment in memberCommentList" :key="comment.uid"
                                :timestamp="timeAgo(comment.createTime)" placement="top">
                <el-card>
                  <div class="commentList">

                      <span class="right p1">
                        <div class="rightTop">
                          <el-tag style="cursor: pointer;" @click.native="goSource(comment)">{{ comment.memberTitle }}</el-tag>
                        </div>

                        <div class="rightCenter ck-content" v-highlight v-html="$xss(comment.content, options)"></div>
                    </span>
                  </div>
                </el-card>
              </el-timeline-item>

              <span v-if="isEnd && memberCommentList.length == 0">
                  <el-empty description="空空如也" image=""></el-empty>
            </span>

            </el-timeline>

            <div class="isEnd">
              <div class="loadContent" @click="loadMore('memberComment')" v-if="!isEnd&&!loading">查看更多</div>
              <div class="lds-css ng-scope" v-if="!isEnd&&loading">
                <div style="width:100%;height:100%" class="lds-facebook">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <span v-if="isEnd &&  memberCommentList.length > 0 ">我也是有底线的~</span>
            </div>

          </div>
        </el-tab-pane>

        <el-tab-pane label="回复我的(活动)" name="回复我的(活动)">
        <span slot="label">
          <i class="el-icon-s-promotion"></i> 回复我的(活动)
        </span>
          <div :style="{'height': minHeight - 65 + 'px'}" style="width: 100%; overflow:auto">
            <el-timeline>
              <el-timeline-item v-for="reply in memberReplyList" :key="reply.uid" :timestamp="timeAgo(reply.createTime)"
                                placement="top">
                <el-card>
                  <div class="commentList">
                  <span class="left p1">
                    <img v-if="reply.user" :src="reply.user.photoUrl ? reply.user.photoUrl:defaultAvatar"
                         onerror="onerror=null;src=defaultAvatar"/>
                    <img v-else :src="defaultAvatar"/>
                  </span>

                    <span class="right p1">

                      <div class="rightTop">
                        <el-link class="userName" :underline="false">{{ reply.user.nickname }}</el-link>
                        <el-tag style="cursor: pointer;" @click.native="goSource(reply)">{{ reply.sourceName }}</el-tag>
                      </div>

                      <div class="rightCenter ck-content" v-highlight v-html="$xss(reply.content, options)"></div>
                  </span>
                  </div>
                </el-card>
              </el-timeline-item>

              <span v-if="isEnd && memberReplyList.length == 0">
                  <el-empty description="空空如也" image=""></el-empty>
            </span>

            </el-timeline>

            <div class="isEnd">
              <div class="loadContent" @click="loadMore('memberReply')" v-if="!isEnd&&!loading">查看更多</div>
              <div class="lds-css ng-scope" v-if="!isEnd&&loading">
                <div style="width:100%;height:100%" class="lds-facebook">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <span v-if="isEnd  &&  memberReplyList.length > 0 ">我也是有底线的~</span>
            </div>

          </div>
        </el-tab-pane>

        <el-tab-pane label="我的评论(动态)" name="我的评论(动态)">
          <span slot="label"><i class="el-icon-message-solid"></i> 我的评论(动态)</span>
          <div :style="{'height': minHeight - 65 + 'px'}" style="width: 100%; overflow:auto;">
            <el-timeline>
              <el-timeline-item v-for="comment in momentCommentList" :key="comment.uid"
                                :timestamp="timeAgo(comment.createTime)" placement="top">
                <el-card>
                  <div class="commentList">

                      <span class="right p1">
                        <div class="rightTop">
                          <el-tag style="cursor: pointer;" @click.native="goSource(comment)">{{ comment.sourceName }}</el-tag>
                        </div>

                        <div class="rightCenter ck-content" v-highlight v-html="$xss(comment.content, options)"></div>
                    </span>
                  </div>
                </el-card>
              </el-timeline-item>

              <span v-if="isEnd && momentCommentList.length == 0">
                  <el-empty description="空空如也" image=""></el-empty>
            </span>

            </el-timeline>

            <div class="isEnd">
              <div class="loadContent" @click="loadMore('momentComment')" v-if="!isEnd&&!loading">查看更多</div>
              <div class="lds-css ng-scope" v-if="!isEnd&&loading">
                <div style="width:100%;height:100%" class="lds-facebook">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <span v-if="isEnd &&  momentCommentList.length > 0 ">我也是有底线的~</span>
            </div>

          </div>
        </el-tab-pane>

        <el-tab-pane label="回复我的(动态)" name="回复我的(动态)">
        <span slot="label">
          <i class="el-icon-s-promotion"></i> 回复我的(动态)
        </span>
          <div :style="{'height': minHeight - 65 + 'px'}" style="width: 100%; overflow:auto">
            <el-timeline>
              <el-timeline-item v-for="reply in momentReplyList" :key="reply.uid" :timestamp="timeAgo(reply.createTime)"
                                placement="top">
                <el-card>
                  <div class="commentList">
                  <span class="left p1">
                    <img v-if="reply.user" :src="reply.user.photoUrl ? reply.user.photoUrl:defaultAvatar"
                         onerror="onerror=null;src=defaultAvatar"/>
                    <img v-else :src="defaultAvatar"/>
                  </span>

                    <span class="right p1">

                      <div class="rightTop">
                        <el-link class="userName" :underline="false">{{ reply.user.nickname }}</el-link>
                        <el-tag style="cursor: pointer;" @click.native="goSource(reply)">{{ reply.sourceName }}</el-tag>
                      </div>

                      <div class="rightCenter ck-content" v-highlight v-html="$xss(reply.content, options)"></div>
                  </span>
                  </div>
                </el-card>
              </el-timeline-item>

              <span v-if="isEnd && momentReplyList.length == 0">
                  <el-empty description="空空如也" image=""></el-empty>
            </span>

            </el-timeline>

            <div class="isEnd">
              <div class="loadContent" @click="loadMore('momentReply')" v-if="!isEnd&&!loading">查看更多</div>
              <div class="lds-css ng-scope" v-if="!isEnd&&loading">
                <div style="width:100%;height:100%" class="lds-facebook">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <span v-if="isEnd  &&  momentReplyList.length > 0 ">我也是有底线的~</span>
            </div>

          </div>
        </el-tab-pane>

        <el-tab-pane label="我的反馈" name="我的反馈">
          <span slot="label"><i class="el-icon-phone"></i> 我的反馈</span>

          <el-collapse v-model="activeNames">
            <el-collapse-item title="反馈须知" name="1">
              <div>如果您对本站有什么想法，可以在这里进行反馈</div>
              <div>或者加入我们的QQ群进行交流</div>
            </el-collapse-item>
          </el-collapse>

          <el-divider></el-divider>

          <div style="width: 100%; height: 450px;overflow:auto">
            <el-timeline>
              <el-timeline-item v-for="feedbackItem in feedbackList" :key="feedbackItem.uid"
                                :timestamp="timeAgo(feedbackItem.createTime)" placement="top">
                <el-card class="feedbackCard">
                  <div class="item">
                  <span class="title">
                    标题:
                  </span>
                    <span class="content">
                    {{ feedbackItem.title }}
                  </span>
                  </div>

                  <div class="item">
                  <span class="title">
                    内容:
                  </span>
                    <span class="content">
                    {{ feedbackItem.content }}
                  </span>
                  </div>

                  <div class="item">
                  <span class="title">
                    反馈状态:
                  </span>
                    <span class="content">
                    <el-tag v-for="item in feedbackDictList" :key="item.uid" :type="item.listClass"
                            v-if="feedbackItem.feedbackStatus == item.dictValue">{{ item.dictLabel }}</el-tag>
                  </span>
                  </div>

                  <div class="item">
                  <span class="title">
                    回复:
                  </span>
                    <span class="content">
                    {{ feedbackItem.reply }}
                  </span>
                  </div>
                </el-card>
              </el-timeline-item>

              <span v-if="isEnd && feedbackList.length == 0">
              <el-empty description="空空如也" image=""></el-empty>
            </span>
            </el-timeline>
          </div>

          <el-divider></el-divider>

          <el-form label-position="left" :model="userInfo" label-width="100px">
            <el-form-item label="标题" :label-width="labelWidth">
              <el-input v-model="feedback.title" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="内容" :label-width="labelWidth">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入反馈内容"
                v-model="feedback.content">
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('feedback')">提 交</el-button>
            </el-form-item>
          </el-form>

        </el-tab-pane>

        <el-tab-pane label="申请友链" name="申请友链">
          <span slot="label"><i class="el-icon-share"></i> 申请友链</span>

          <el-form label-position="left" :model="friendLink" label-width="100px" ref="friendLink" :rules="linkRules">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="友链申请需知" name="1">
                <span v-html="info.linkApplyTemplate">{{ info.linkApplyTemplate }}</span>
              </el-collapse-item>
            </el-collapse>

            <el-divider></el-divider>

            <el-form-item label="网站图标">
              <div class="imgBody" v-if="friendLink.photoList">
                <i class="el-icon-error inputClass" v-show="icon" @click="deletePhoto('link')"
                   @mouseover="icon = true"></i>
                <img @mouseover="icon = true" @mouseout="icon = false" v-bind:src="friendLink.photoList[0]"/>
              </div>

              <div v-else class="uploadImgBody" @click="checkPhoto">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </el-form-item>

            <el-form-item label="网站名称" :label-width="labelWidth" prop="title">
              <el-input v-model="friendLink.title" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="网站简介" :label-width="labelWidth" prop="summary">
              <el-input v-model="friendLink.summary" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="网站地址" :label-width="labelWidth" prop="url">
              <el-input v-model="friendLink.url" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="站长邮箱" :label-width="labelWidth" prop="email">
              <el-input v-model="friendLink.email" placeholder="用于申请通过邮件通知" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('replyLink')">申 请</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="修改密码" name="修改密码">
          <span slot="label"><i class="el-icon-s-tools"></i> 修改密码</span>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="修改密码须知" name="1">
              <div>此修改密码功能仅适用于账号和密码登录</div>
              <div>对于第三方登录的账号，无法进行密码修改</div>
            </el-collapse-item>
          </el-collapse>
          <el-form ref="userInfoForm" label-position="left" :model="userInfo" label-width="100px"
                   :rules="userInfoRules">
            <el-form-item label="旧密码" :label-width="labelWidth" prop="oldPwd">
              <el-input type="password" v-model="userInfo.oldPwd" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="新密码" :label-width="labelWidth" prop="newPwd">
              <el-input type="password" v-model="userInfo.newPwd" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="重复密码" :label-width="labelWidth" prop="newPwd2">
              <el-input type="password" v-model="userInfo.newPwd2" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('changePwd')">提 交</el-button>
            </el-form-item>
          </el-form>

        </el-tab-pane>

      </el-tabs>
    </el-drawer>

    <!--头像裁剪-->
    <avatar-cropper
      v-show="imagecropperShow"
      :key="imagecropperKey"
      :width="300"
      :height="300"
      :url="url"
      lang-type="zh"
      @close="close"
      @crop-upload-success="cropSuccess"
    />

    <div :style="{'min-height': minHeight + 'px'}" style="padding-top: 20px">
      <router-view/>
    </div>

    <footer>
      <p v-html="info.recordNum"></p>
    </footer>

    <!--创建博客-->
    <CreateBlog v-if="dialogFormVisible" :visible="dialogFormVisible" :isEdit="isEdit"
                :editorModel="userInfo.editorModel" :formData="formData" @beforeClose="beforeClose"></CreateBlog>


    <!--  <ChatRoom  style="margin-top: 30px"></ChatRoom>-->

    <!-- 公众号账号绑定 -->
    <el-dialog
      title="公众号账号绑定"
      :visible.sync="wechatBindDialogVisible"
      close-on-click-modal
      :width="drawerSize"
    >

      <div style="text-align: center">
        <el-image :src=" webConfig.wechatPhoto" style="width: 200px; height: 200px"></el-image>
        <el-row>
          <span style="font-size: 14px; color: #303133">扫码关注公众号，回复验证码完成绑定</span>
        </el-row>
        <el-row>
          <span style="font-size: 14px; color: #303133">绑定验证码：</span>
          <span style="color: red; font-weight: bold">{{ bindInfo.bindKey }}</span>
          <i class="el-icon-refresh" @click="refreshBindKey('wechat')" style="cursor: pointer"></i>
        </el-row>
      </div>
    </el-dialog>

    <!-- 小程序账号绑定 -->
    <el-dialog
      title="小程序账号绑定"
      :visible.sync="miniBindDialogVisible"
      close-on-click-modal
      :width="drawerSize"
    >
      <div style="text-align: center">
        <el-image :src=" webConfig.miniPhoto" style="width: 200px; height: 200px"></el-image>
        <el-row>
          <span style="font-size: 14px; color: #303133">扫码打开小程序，回复验证码完成绑定</span>
        </el-row>
        <el-row>
          <span style="font-size: 14px; color: #303133">绑定验证码：</span>
          <span style="color: red; font-weight: bold">{{ bindInfo.bindKey }}</span>
          <i class="el-icon-refresh" @click="refreshBindKey('mini')" style="cursor: pointer"></i>
        </el-row>
      </div>

    </el-dialog>

    <!-- 微信账号绑定 -->
    <el-dialog
      title="微信账号绑定"
      :visible.sync="personWechatBindDialogVisible"
      close-on-click-modal
      :width="drawerSize"
    >
      <div style="text-align: center">
        <div id="login_container" style="text-align: center"></div>
      </div>

    </el-dialog>

    <div>
      <!--聊天-->
      <el-tooltip class="item" effect="light" content="聊天室" placement="left-end">
        <a
          href="javascript:void(0);"
          class="cd-chat cd-is-visible"
          @click="goChat"
        >
          <span style="font-size: 24px; color: #3299BB;" class="iconfont">&#xe89c;</span>
          <el-badge is-dot :value="userReceiveMessageCount" style="float: right; right: 6px;" class="item"
                    :hidden="userReceiveMessageCount == 0"></el-badge>
        </a>
      </el-tooltip>

      <!--暗黑模式-->
      <el-tooltip class="item" effect="light" content="暗黑模式" placement="left-end">
        <a
          v-if="darkModel == 0"
          href="javascript:void(0);"
          @click="changeDarkModel(1)"
          class="cd-dark cd-is-visible"
        >
          <span style="font-size: 26px; color: #EDC951" class="iconfont">&#xe6dd;</span>
        </a>
        <a
          v-else
          href="javascript:void(0);"
          @click="changeDarkModel(0)"
          class="cd-dark cd-is-visible"
        >
          <span style="font-size: 26px" class="iconfont">&#xe60d;</span>
        </a>
      </el-tooltip>


      <!--顶部模式-->
      <a
        href="javascript:void(0);"
        @click="returnTop"
        :class="isCdTopVisible?'cd-top cd-is-visible':'cd-top'"
      >
        <span style="font-size: 26px;" class="iconfont">&#xe6fb;</span>
      </a>
    </div>

    </body>
    </html>
  </div>
</template>

<script>
import CreateBlog from '../components/CreateBlog'

import AvatarCropper from '@/components/AvatarCropper'
import {getWebConfig, getWebNavbar} from "../api/index";
import {delCookie, getCookie, setCookie} from "@/utils/cookieUtils";
import CodeCopy from "@/components/CodeCopy";
import {
  addFeedback,
  authVerify,
  deleteUserAccessToken,
  editUser,
  getAccountBindList,
  getFeedbackList,
  login,
  replyLink,
  updateUserPwd,
  getMiniBindUrl,
} from "../api/user";
import {getMemberCommentListByUser, getMemberReplyListByUser,getMomentCommentListByUser, getMomentReplyListByUser} from "../api/comment";

import {getUserReceiveNoticeCount, readUserReceiveNoticeCount} from "../api/notice"
import LoginBox from "../components/LoginBox";
import WebNotice from "../components/WebNotice";
import {getListByDictTypeList} from "@/api/sysDictData"
import {deleteRankMember, editRankMember, publishRankMember} from "@/api/createBlog"
import {mapMutations} from 'vuex';
import {InitUserAuthCode, timeAgo} from "../utils/webUtils";
import {getSearchModel} from "@/api/search";
// import {deleteCollect, getUserCollectList} from "../api/collect";
import {getBindKey, loginCheck} from "../api/wechat";
import {getMeRankMemberListPC} from "../api/createBlog";
import {listMyOrder, listOrderOfMyRankMember, organizerCancelOrder} from "../api/order";
import {downloadRankMember} from "../api/blogContent";
import {getCurrentUserAmount} from "../api/about";
import Qrcode from 'vue-qrcode-component'
export default {
  name: "index",
  components: {
    LoginBox,
    AvatarCropper,
    CreateBlog,
    WebNotice,
    Qrcode,
  },
  data() {
    return {
      // xss白名单配置
      options: {
        whiteList: {
          div: ['class'],
          br: ['class'],
          a: ['href', 'title', 'target'],
          span: ['class'],
          h1: ['class'],
          h2: ['class'],
          h3: ['class'],
          h4: ['class'],
          h5: ['class'],
          h6: ['class'],
          pre: [],
          code: ['class'],
          p: ['class'],
          ol: [],
          blockquote: ['class'],
          ul: ['class'],
          li: ['class'],
          img: ['class', 'src', 'alt', 'width', 'height', 'style'],
          iframe: ['class', 'src', 'style', 'scrolling', 'border', 'frameborder', 'allowfullscreen'],
          hr: [],
          video: ['class', 'src', 'controls'],
          source: ['src', 'type']
        }
      },
      drawDialogVisible: false,
      lineLabelWidth: "120px", //一行的间隔数
      
      userAmount: 0, // 用户金额
      webConfig: {},
      bindInfo: {},
      wechatBindDialogVisible: false, // 微信公众号绑定
      miniBindDialogVisible: false, // 小程序绑定
      personWechatBindDialogVisible: false, // 个人微信绑定
      qrcode: null,
      minHeight: window.screen.height - 273,
      queryParams: {
        keyword: "",
        tagKeyword: "", //标签搜索
        sortKeyword: "", //分类搜索
        publishKeyword: "", // 发布 搜索
        originalKeyword: "", // 原创 搜索
        openCommentKeyword: "", // 开启评论
        auditStatusKeyword: "", // 审核状态
      }, // 搜索条件
      // 第三方账号绑定类别
      loginType: {
        password: true,
        gitee: true,
        github: true,
        qq: true,
        wechat: true,
        mini: true,
        personWechat: true,
      },
      total: 0, //总数量
      isEnd: false, //是否到底底部了
      loading: false, //是否正在加载
      pageSize: 10,
      currentPage: 0,
      dialogFormVisible: false, // 控制创建博客的弹出
      searchModel: 0, //搜索模式 0:SQL搜索、1:ES搜索、2:Solr搜索
      activeNames: ['1', '2'], //激活的折叠面板
      activeName: "个人中心", // 激活的标签
      memberOriginalDictList: [], //是否原创字典
      memberPublishDictList: [], //是否发布字典
      yesNoDictList: [], // 是否 字典列表
      genderDictList: [], //性别 字典列表
      feedbackDictList: [], // 反馈 字典列表
      editorModalDictList: [], // 文本编辑器字典列表
      commentReportDictList: [], // 评论举报字典
      auditStatusDictList: [], // 审批状态字典
      commentReportDictDefault: null, // 评论举报字典默认值
      imagecropperShow: false,
      imagecropperKey: 0,
      url: process.env.FILE_API + "/file/cropperPicture",
      webSite: process.env.VUE_DIDIOK_WEB,
      webNavbarList: [],
      drawer: false,
      info: {},
      saveTitle: "",
      keyword: "",
      showSearch: false, //控制搜索框的弹出
      showHead: false, //控制导航栏的弹出
      isCdTopVisible: false,
      isVisible: true, //控制web端导航的隐藏和显示
      isLogin: false,
      showLogin: false, //显示登录框
      userInfo: { // 用户信息
      },
      feedback: {}, //反馈提交
      friendLink: {}, //友链申请
      icon: false, //控制删除图标的显示
      labelWidth: "80px",
      memberCommentList: [], //我的评论(活动)
      memberReplyList: [], //我的回复(活动)
      momentCommentList: [], //我的评论（相亲角）
      momentReplyList: [], //我的回复（相亲角）
      praiseList: [], //我的点赞
      feedbackList: [], //我的反馈
      userRankMemberList: [], // 用户博客列表
      myRankMemberOrderList: [], //我发起的活动下的订单列表
      myOrderList: [], //我的报名
      creditsLogList: [],//积分流水列表
      collectList: [], // 用户收藏列表
      openComment: "0", //是否开启评论
      defaultAvatar: process.env.defaultAvatar, // 默认头像
      drawerSize: "33%",
      userReceiveMemberCommentCount: 0, // 用户收到的评论数
      userReceiveMomentCommentCount: 0, // 用户收到的评论数
      userReceivePraiseCount: 0, // 用户收到的点赞数
      userReceiveSystemCount: 0, // 用户收到的系统通知数
      userReceiveWatchCount: 0, // 用户收到的关注数
      userReceiveMessageCount: 0, // 用户收到的消息数
      userReceiveCollectCount: 0, // 用户收到的收藏数
      isEdit: false, // 是否编辑博客
      formData: {}, // 表单数据
      showCreateRankMember: false, // 是否显示用户创作按钮
      showChat: false, // 显示私信按钮
      browserFlag: 1, // 浏览器标志【默认Chrome】
      accountList: [], // 第三方綁定账号列表
      darkModel: 0, //暗黑模式 是否开启
      dialogHotSearchVisible: false,
      leaveTimeout: null, // 离开定时器
      
      rules: {
        qqNumber: [
          {pattern: /[1-9]([0-9]{5,11})/, message: '请输入正确的QQ号码'},
        ],
        email: [
          {pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, message: '请输入正确的邮箱'},
        ],
        nickname: [
          {min: 0, max: 20, message: '长度在0到20个字符'},
        ],
        occupation: [
          {min: 0, max: 10, message: '长度在0到10个字符'},
        ],
        summary: [
          {min: 0, max: 200, message: '长度在0到200个字符'},
        ],
      },
      linkRules: {
        title: [
          {required: true, message: '网站名称不能为空', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在1到10个字符'},
        ],
        summary: [
          {required: true, message: '简介不能为空', trigger: 'blur'},
          {min: 1, max: 50, message: '长度在1到50个字符'},
        ],
        url: [
          {required: true, message: '网站地址不能为空', trigger: 'blur'},
          {pattern: /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/, message: '请输入有效的URL'},
        ],
        email: [
          {pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, message: '请输入正确的邮箱'},
        ],
      },
      userInfoRules: {
        oldPwd: [
          {required: true, message: '旧密码不能为空', trigger: 'blur'},
          {min: 5, max: 20, message: '密码长度在5到20个字符'},
        ],
        newPwd: [
          {required: true, message: '新密码不能为空', trigger: 'blur'},
          {min: 5, max: 20, message: '密码长度在5到20个字符'},
        ],
        newPwd2: [
          {required: true, message: '新密码不能为空', trigger: 'blur'},
          {min: 5, max: 20, message: '密码长度在5到20个字符'},
        ]
      },
      actionHandle: {
        "PersonCenter": "个人中心",
        "AccountBind": "账号绑定",
        "MyArticle": "我发起的活动",
        "MyMemberComment": "我的评论(活动)",
        "MyMemberReply": "回复我的(活动)",
        "MyMomentComment": "我的评论(动态)",
        "MyMomentReply": "回复我的(动态)",
      
        "MyFeedback": "我的反馈",
        "ChangePassword": "修改密码",
      },
      webSocket: null, // socket对象
      WS_API: process.env.WS_API, // WebSocket
      authCode: {}, // 用户权限Code
    };
  },
  mounted() {
    let that = this;
    let offset = 300;
    let after = 0;
    window.addEventListener("scroll", function () {
      let scrollTop = document.documentElement.scrollTop; //当前的的位置
      let scrollHeight = document.documentElement.scrollHeight; //最高的位置
      if (scrollTop > offset) {
        that.isCdTopVisible = true;
      } else {
        that.isCdTopVisible = false;
      }
      // if (scrollTop > after) {
      //   that.isVisible = false;
      // } else {
      //   if (scrollTop < 500) {
      //     that.isVisible = true;
      //   } else {
      //     that.isVisible = false;
      //   }
      // }
      after = scrollTop;
    });

    // 屏幕自适应
    window.onresize = () => {
      return (() => {
        that.setSize()
      })()
    }
  },
  watch: {
    $route(to, from) {
      this.getCurrentPageTitle()
    },
    '$store.state.user.userInfo': function (newFlag, oldFlag) {
      this.getUserAuthCodeList()
    },

    // 判断登录状态位是否改变（用于控制弹框）
    '$store.state.app.loginMessage': function (newFlag, oldFlag) {
      console.log("this.showLogin = true");
      this.showLogin = true
    },
    // 判断个人中心是否弹出新内容(用于控制弹出框)
    '$store.state.app.domainEventMessage': function (event, oldFlag) {
      console.log("处理领域事件", event)
      this.domainEventHandler(event)
    },
  },
  metaInfo() {
    return {
      title: this.info.title,
      link: [
        {rel: 'icon', href: this.info.logoPhoto}
      ],
      meta: [],
    };
  },
  updated() {
    this.update()
  },
  created() {
    // 字典查询
    this.getDictList()
    this.getToken()
    this.getKeyword()
    this.getCurrentPageTitle()
    this.getWebConfigInfo()
    this.getWebNavbarList()
    this.setSize()
    this.setUserReceiveCommentCount()
    // 获取浏览器类型
    this.getBrowser()
    // 获取搜索模式
    this.getRankMemberSearchModel()
    // 从url中打开个人中心
    this.getActionByUrl()
    // 初始化专栏
    this.initWebSocket()
    // 初始化暗黑模式
    this.initDarkModel()
  },
  destroyed() {
    if (this.webSocket) {
      // 离开路由之后断开websocket连接
      this.webSocket.close();
    }
  },
  methods: {
    //拿到vuex中的写的方法
    ...mapMutations(['setUserInfo', 'setLoginState', 'setWebConfigData', 'setNoticeType', 'setCommentReportDict', 'setPaySuccess', 'setTaskFinish', 'setAuthCode']),
    initDarkModel() {
      // 暗黑模式
      let darkModel = getCookie("darkModel")
      if (darkModel && darkModel == "1") {
        this.darkModel = 1
        window.document.documentElement.setAttribute('data-theme', 'dark')
      } else {
        this.darkModel = 0
        window.document.documentElement.setAttribute('data-theme', 'light')
      }
    },
    
    getUserAmountMethod() {
      getCurrentUserAmount().then(resp => {
        if (resp.code == this.$ECode.SUCCESS) {
          this.userAmount = resp.data
        }
      })
    },
    initWebSocket() {
      if (window.WebSocket) {
        this.webSocket = new WebSocket(
          this.WS_API + `/ws?token=${getCookie("token")}`
        );
        this.webSocket.onmessage = this.onMessage;
        this.webSocket.onopen = this.onOpen;
        this.webSocket.onerror = this.onError;
        this.webSocket.onclose = this.onClose;
        console.log("初始化WebSocket成功")
      } else {
        console.log("您的浏览器不支持websocket");
      }
    },
    onMessage(e) {
      let messageVo = JSON.parse(e.data);
      console.log("接收消息", messageVo);
      // 接收到领域事件
      if (messageVo.messageLevel && messageVo.messageLevel === 40010) {
        console.log("处理领域事件", messageVo);
        switch (messageVo.message) {
          case "TASK_FINISH": {
            // 刷新任务列表
            console.log("任务完成")
            this.setTaskFinish(Math.random())
          }
            break;
          case "PAY_SUCCESS": {
            // 赞赏成功
            console.log("赞赏成功")
            this.setPaySuccess(Math.random())
          }
            break;
          case "NOTICE_FLUSH": {
            // 刷新通知
            console.log("刷新通知")
            this.setUserReceiveCommentCount()
          }
            break;
        }
      }

    },
    onOpen() {
      console.log("websocket已连接");
    },
    onError() {
      console.log("websocket连接失败");
    },
    onClose(e) {
      console.log("断开连接", e);
    },
    showHotSearch: function () {
      this.dialogHotSearchVisible = true;
    },
    domainEventHandler(event) {
      switch (event.type) {
        // 任务类领域事件
        case "task": {
          this.taskDomainEventHandler(event)
        }
          break
        case "personCenter": {
          this.showPersonCenter(event.action)
        }
          break
      }
    },
    taskDomainEventHandler(event) {
      switch (event.action) {
        // 写博客
        case "RANK_MEMBER": {
          this.dialogFormVisible = true
        }
          break;
        // 发表评论
        case "COMMENT": {
          this.$router.push("/messageBoard")
        }
          break;
        // 写动态
        case "MOMENT": {
          this.$router.push("/moment")
        }
          break;
        // 去聊天
        case "CHAT": {
          this.$router.push("/chat")
        }
          break;
        // 去聊天
        case "LUCKY": {
          this.$router.push("/lucky")
        }
          break;
      }
      // 判断是否有消息提示需要处理
      if (event.message) {
        this.$message.success(event.message)
      }
      if (event.router) {
        this.$router.push(event.router)
      }
    },
    chooseitem: function (data) {
      this.keyword = data
      this.search();
      this.onLeaveTd(false)
    },
    // 搜索
    search: function () {
      if (this.keyword == "" || this.keyword.trim() == "") {
        this.$notify.error({
          title: '错误',
          message: "关键字不能为空",
          type: 'error',
          offset: 100
        });
        return;
      }
      
      if (this.$route.path == '/userCenter') {
        this.$router.push({
          path: this.$route.fullPath,
          query: {keyword: this.keyword, model: this.searchModel}
        })
      } else {
        this.$router.push({path: "/list", query: {keyword: this.keyword, model: this.searchModel}});
      }
    },
    //获取对应markdown代码块标签
    update() {
      setTimeout(() => {
        document.querySelectorAll('pre').forEach(el => {
          if (el.classList.contains('code-copy-added')) {
            return
          }
          //   https://cn.vuejs.org/v2/api/index.html#Vue-extend
          /* 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象 */
          let ComponentClass = Vue.extend(CodeCopy)
          let instance = new ComponentClass()
          instance.code = el.innerText
          instance.parent = el
          /* 手动挂载 */
          instance.$mount()
          el.classList.add('code-copy-added')
          el.appendChild(instance.$el)
        })
      }, 100)
    },
    changeDarkModel(darkModel) {
      if (darkModel == 1) {
        console.log("切换暗黑模式")
        window.document.documentElement.setAttribute('data-theme', 'dark')
      } else {
        console.log("切换亮白模式")
        window.document.documentElement.setAttribute('data-theme', 'light')
      }
      // 设置暗黑模式
      setCookie("darkModel", darkModel, 31)
      this.darkModel = darkModel
    },
    refreshBindKey(type) {
      this.goBind(type)
    },

    goBind(source) {
      // 判断是否点击公众号登录
      if (source == "wechat") {
        this.wechatBindDialogVisible = true
        console.log("点击公众号登录")
        getBindKey().then(response => {
          console.log("获取绑定的key", response)
          if (response.code == this.$ECode.SUCCESS) {
            let bindInfo = response.data
            this.bindInfo = bindInfo
            let count = 0
            let interval = setInterval(() => {
              count++
              // 当检查30次未扫码的时候，将二维码失效，重试关闭接口请求
              if (count > 30) {
                this.wechatLoginKey.bindKey = "验证码失效,请刷新"
                clearInterval(interval)
              }
              let params = {}
              params.code = bindInfo.bindKey
              params.ticket = bindInfo.ticket
              loginCheck(params).then(response => {
                if (response.code == this.$ECode.SUCCESS) {
                  // 判断url中是否含有token
                  let token = response.data
                  if (token != undefined) {
                    // 设置token七天过期
                    setCookie("token", token, 31)
                    location.replace(this.webSite);
                  }
                }
              });
            }, 3000);
          }
        })
        return
      } else if (source == "mini") {
        this.miniBindDialogVisible = true
        // 如果是小程序的绑定，生成小程序的绑定链接，然后使用微信扫一扫
        getBindKey().then(response => {
          console.log("获取绑定的key", response)
          if (response.code == this.$ECode.SUCCESS) {
            let bindInfo = response.data
            this.bindInfo = bindInfo
            let count = 0
            let interval = setInterval(() => {
              count++
              // 当检查30次未扫码的时候，将二维码失效，重试关闭接口请求
              if (count > 30) {
                this.wechatLoginKey.bindKey = "验证码失效,请刷新"
                clearInterval(interval)
              }
              let params = {}
              params.code = bindInfo.bindKey
              params.ticket = bindInfo.ticket
              loginCheck(params).then(response => {
                if (response.code == this.$ECode.SUCCESS) {
                  // 判断url中是否含有token
                  let token = response.data
                  if (token) {
                    // 设置token七天过期
                    setCookie("token", token, 31)
                    location.replace(this.webSite);
                  }
                }
              });
            }, 3000);
          }
        })
        return
      }else if (source == "person_wechat") {
        // 如果是微信登录
        this.personWechatBindDialogVisible = true
        // 生成绑定的URL
        let params = new URLSearchParams()
        params.append("operateType", "bind")
        getWeChatLoginUrl(params).then(response => {
          if (response.code === this.$ECode.SUCCESS) {
            console.log("获取微信的信息", response)
            let data = response.data;
            let obj = new WxLogin({
              // 需要显示内嵌二维码的容器id
              id: 'login_container',
              self_redirect: true,
              // 应用ID
              appid: data.appId,
              // 网页默认即可
              scope: data.scope,
              // 授权成功后回调的url
              redirect_uri: encodeURIComponent(data.redirect_uri),
              // 可设置为简单的随机数加session用来校验
              state: data.state,
              // 二维码的样式，提供"black"、"white"可选。
              style: 'black',
              // 自定义样式链接
              href: 'https://oos.moguit.cn/cdn/wechatLogin.css'
            })
            // 开始定时扫描，判断是否完成登录
            let count = 0
            let interval = setInterval(() => {
              count++
              // 当检查15次未扫码的时候，将二维码失效，重试关闭接口请求
              if (count > 30) {
                that.wechatLoginKey.loginKey = "验证码失效,请刷新"
                clearInterval(interval)
              }
              let params = {}
              params.code = data.loginKey
              params.ticket = data.ticket
              loginCheck(params).then(response => {
                console.log("获取用户状态", response)
                if (response.code == that.$ECode.SUCCESS) {
                  console.log("获取token", response)
                  // 设置token到Cookie中，并刷新页面
                  let token = response.data
                  if (token) {
                    setCookie("token", token, 31)
                    location.reload();
                  }
                }
              });
            }, 3000);

          }
        })

        return
      }

      // 正常的绑定流程
      let params = new URLSearchParams();
      params.append("source", source);
      params.append("type", "bind");
      login(params).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          window.location.href = response.data.url
        }
      });
    },
    setLoginTypeList: function () {
      // 获取登录方式列表
      let webConfigData = this.$store.state.app.webConfigData
      this.webConfig = webConfigData
      if (webConfigData.loginTypeList != undefined) {
        let loginTypeList = JSON.parse(webConfigData.loginTypeList)
        for (let a = 0; a < loginTypeList.length; a++) {
          switch (loginTypeList[a]) {
            case "1": {
              this.loginType.password = false
            }
              break;
            case "2": {
              this.loginType.gitee = false
            }
              break;
            case "3": {
              this.loginType.github = false
            }
              break;
            case "4": {
              this.loginType.qq = false
            }
              break;
            case "5": {
              this.loginType.wechat = false
            }
              break;
            case "6": {
              this.loginType.mini = false
            }
              break;
            case "7": {
              this.loginType.personWechat = false
            } break;
            default: {
              console.log("登录方式设置有误！！", loginTypeList[a])
            }
          }
        }
      }
    },
    clickWebNavbar: function (webNavbar) {
      if (this.info.title && webNavbar.name) {
        document.title = this.info.title + " | " + webNavbar.name
      }
    },
    getRankMemberSearchModel: function () {
      getSearchModel().then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.searchModel = response.data
        }
      })
    },
    setSize() {
      // 屏幕大于950px的时候，显示侧边栏
      let clientWidth = document.body.clientWidth
      if (clientWidth > 1360) {
        this.drawerSize = "33%";
        this.showSearch = true
      } else if (clientWidth < 1360 && clientWidth > 950) {
        this.drawerSize = "50%";
        this.showSearch = false
      } else if (clientWidth < 950 && clientWidth > 650) {
        this.drawerSize = "70%";
        this.showSearch = false
      } else {
        this.drawerSize = "95%";
        this.showSearch = false
      }
    },
    loadContent: function () {
      this.currentPage = this.currentPage + 1;
    },
    
    // 跳转到个人中心页
    getUserCenter: function (rankMember) {
      console.log("跳转到用户中心", rankMember)
      // 判断是后台添加，还是前台投稿
      if (rankMember.articleSource == 0) {
        let routeData = this.$router.resolve({
          path: "/userCenter",
          query: {adminUid: rankMember.adminUid}
        });
        window.open(routeData.href, '_blank');
      } else {
        let routeData = this.$router.resolve({
          path: "/userCenter",
          query: {createUserUid: rankMember.createUserUid}
        });
        window.open(routeData.href, '_blank');
      }
    },
    //跳转到文章详情
    goToInfo(rankMember) {
      console.log("跳转", rankMember)
      let routeData = this.$router.resolve({
        path: "/info/" + rankMember.oid
      });
      window.open(routeData.href, '_blank');
    },
    //跳转到问答详情
    goToUserMoment(userMoment) {
      console.log("跳转", userMoment)
      let routeData = this.$router.resolve({
        path: "/moment",
        query: {uid: userMoment.uid}
      });
      window.open(routeData.href, '_blank');
    },
    
    // 获取导航栏列表
    getWebNavbarList() {
      let params = {};
      params.isShow = 1
      getWebNavbar(params).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          let webNavbarList = response.data
          let newWebNavbarList = []
          for (let a = 0; a < webNavbarList.length; a++) {
            if (webNavbarList[a].isShow == 1) {
              newWebNavbarList.push(webNavbarList[a])
            }
          }
          this.webNavbarList = newWebNavbarList
          setCookie("webNavbarList", JSON.stringify(webNavbarList), 1)
        }
      })
    },
    // 跳转到资源详情
    goSource: function (comment) {
      let source = comment.source
      switch (source) {
        case "MESSAGE_BOARD": {
          let routeData = this.$router.resolve({
            path: "/messageBoard"
          });
          window.open(routeData.href, '_blank');
        }
          break;
        case "RANK_MEMBER_INFO": {
          let routeData = this.$router.resolve({
            path: "/info/" + comment.memberOid,
          });
          window.open(routeData.href, '_blank');
        }
          break;
        case "USER_MOMENT": {
          let routeData = this.$router.resolve({
            path: "/moment?uid=" + comment.momentUid,
          });
          window.open(routeData.href, '_blank');
        }
          break;
        case "ABOUT": {
          let routeData = this.$router.resolve({
            path: "/about"
          });
          window.open(routeData.href, '_blank');
        }
          break;
      }
    },

    // 获取评论列表
    getMemberCommentList: function (isClean) {
      if (isClean) {
        this.memberCommentList = [];
      }
      let params = {}
      params.pageSize = this.pageSize;
      params.currentPage = this.currentPage;
      getMemberCommentListByUser(params).then(response => {
        if (response.code == this.$ECode.SUCCESS && response.data.records.length > 0) {
          let memberCommentList = response.data.records
          this.memberCommentList = this.memberCommentList.concat(memberCommentList);
          this.total = response.data.total;
          this.pageSize = response.data.size;
          this.currentPage = response.data.current;
          //全部加载完毕
          if (memberCommentList.length < this.pageSize) {
            this.isEnd = true;
          }
        } else {
          this.isEnd = true
        }
        this.loading = false
      })
    },
    // 获取回复列表
    getMemberReplyList: function (isClean) {
      if (isClean) {
        this.memberReplyList = [];
      }
      let params = {}
      params.pageSize = this.pageSize;
      params.currentPage = this.currentPage;
      this.loading = true
      getMemberReplyListByUser(params).then(response => {
        if (response.code == this.$ECode.SUCCESS && response.data.records.length > 0) {
          let memberReplyList = response.data.records
          this.memberReplyList = this.memberReplyList.concat(memberReplyList);
          this.total = response.data.total;
          this.pageSize = response.data.size;
          this.currentPage = response.data.current;
          //全部加载完毕
          if (memberReplyList.length < this.pageSize) {
            this.isEnd = true;
          }
        } else {
          this.isEnd = true
        }
        this.loading = false
      })
    },

    // 获取评论列表
    getMomentCommentList: function (isClean) {
      if (isClean) {
        this.momentCommentList = [];
      }
      let params = {}
      params.pageSize = this.pageSize;
      params.currentPage = this.currentPage;
      getMomentCommentListByUser(params).then(response => {
        if (response.code == this.$ECode.SUCCESS && response.data.records.length > 0) {
          let momentCommentList = response.data.records
          this.momentCommentList = this.momentCommentList.concat(momentCommentList);
          this.total = response.data.total;
          this.pageSize = response.data.size;
          this.currentPage = response.data.current;
          //全部加载完毕
          if (momentCommentList.length < this.pageSize) {
            this.isEnd = true;
          }
        } else {
          this.isEnd = true
        }
        this.loading = false
      })
    },
    // 获取回复列表
    getMomentReplyList: function (isClean) {
      if (isClean) {
        this.momentReplyList = [];
      }
      let params = {}
      params.pageSize = this.pageSize;
      params.currentPage = this.currentPage;
      this.loading = true
      getMomentReplyListByUser(params).then(response => {
        if (response.code == this.$ECode.SUCCESS && response.data.records.length > 0) {
          let momentReplyList = response.data.records
          this.momentReplyList = this.momentReplyList.concat(momentReplyList);
          this.total = response.data.total;
          this.pageSize = response.data.size;
          this.currentPage = response.data.current;
          //全部加载完毕
          if (memberReplyList.length < this.pageSize) {
            this.isEnd = true;
          }
        } else {
          this.isEnd = true
        }
        this.loading = false
      })
    },

    // 获取反馈列表
    getFeedback: function (isClean) {
      let params = {}
      getFeedbackList(params).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.feedbackList = response.data.records;
        }
      })
    },

    // 获取用户博客列表
    getRankMemberList: function (isClean) {
      if (isClean) {
        this.userRankMemberList = [];
      }
      let params = {}
      params.auditStatus = this.queryParams.auditStatusKeyword
      params.isPublish = this.queryParams.publishKeyword
      params.isOriginal = this.queryParams.originalKeyword
      params.keyword = this.queryParams.keyword
      params.pageSize = this.pageSize;
      params.currentPage = this.currentPage;
      getMeRankMemberListPC(params).then(response => {
        if (response.code == this.$ECode.SUCCESS && response.data.records.length > 0) {
          let userRankMemberList = response.data.records
          this.userRankMemberList = this.userRankMemberList.concat(userRankMemberList);
          this.total = response.data.total;
          this.pageSize = response.data.size;
          this.currentPage = response.data.current;
          //全部加载完毕
          if (userRankMemberList.length < this.pageSize) {
            this.isEnd = true;
          }
        } else {
          this.isEnd = true
        }
        this.loading = false
      })
    },

    
    // 获取我发起的活动下的订单列表
    listOrderOfMyRankMember: function (isClean) {
      if (isClean) {
        this.myRankMemberOrderList = [];
      }
      let params = {}
      params.keyword = this.queryParams.keyword
      params.pageSize = this.pageSize;
      params.currentPage = this.currentPage;
      listOrderOfMyRankMember(params).then(response => {
        if (response.code == this.$ECode.SUCCESS && response.data.records.length > 0) {
          let myRankMemberOrderList = response.data.records
          this.myRankMemberOrderList = this.myRankMemberOrderList.concat(myRankMemberOrderList);
          this.total = response.data.total;
          this.pageSize = response.data.size;
          this.currentPage = response.data.current;
          //全部加载完毕
          if (myRankMemberOrderList.length < this.pageSize) {
            this.isEnd = true;
          }
        } else {
          this.isEnd = true
        }
        this.loading = false
      })
    },

    // 我的报名
    listMyOrder: function (isClean) {
      if (isClean) {
        this.myOrderList = [];
      }
      let params = {}
      params.keyword = this.queryParams.keyword
      params.pageSize = this.pageSize;
      params.currentPage = this.currentPage;
      listMyOrder(params).then(response => {
        if (response.code == this.$ECode.SUCCESS && response.data.records.length > 0) {
          let myOrderList = response.data.records
          this.myOrderList = this.myOrderList.concat(myOrderList);
          this.total = response.data.total;
          this.pageSize = response.data.size;
          this.currentPage = response.data.current;
          //全部加载完毕
          if (myOrderList.length < this.pageSize) {
            this.isEnd = true;
          }
        } else {
          this.isEnd = true
        }
        this.loading = false
      })
    },

    // 删除博客
    handleDeleteRankMember: function (row) {
      let that = this;
      this.$confirm("此操作将把博客删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {};
          params.uid = row.uid;
          deleteRankMember(params).then(response => {
            that.$commonUtil.message.success(response.message)
            that.getRankMemberList(true);
          });
        }).catch(() => {
        that.$commonUtil.message.info("已取消删除")
      });
    },
    handleDownload: function (object, type) {
      if (type == "rankMember") {
        // 下载博客
        let params = new URLSearchParams()
        params.append("memberUid", object.uid)
        downloadRankMember(params).then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            this.$commonUtil.htmlToMarkdownFile(object.title, object.content)
          }
        })

      } else {
        this.$commonUtil.htmlToMarkdownFile(object.title, object.content)
      }
    },
    
    userBindAccountList() {
      getAccountBindList().then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.accountList = response.data
        }
      })
    },

    // 标签选择
    handleClick(tab, event) {
      this.currentPage = 1
      this.queryParams = {
        keyword: "",
        tagKeyword: "", //标签搜索
        sortKeyword: "", //分类搜索
        publishKeyword: "", // 发布 搜索
        originalKeyword: "", // 原创 搜索
        openCommentKeyword: "", // 开启评论
        auditStatusKeyword: "", // 审核状态
      } // 搜索条件
      this.query
      this.isLoading = false
      this.isEnd = false
      this.userRankMemberList = []
      this.myRankMemberOrderList = []
      this.praiseList = []
      this.memberCommentList = []
      this.memberReplyList = []
      switch (tab.label) {
        case "个人中心": {
          console.log("点击个人中心")
          //this.getUserAmountMethod()
        }
          break;
        case "账号绑定": {
          console.log("账号绑定")
          this.setLoginTypeList()
          this.userBindAccountList()
        }
          break;
        case "我发起的活动": {
          this.getRankMemberList(true)
        }
          break;
        case "报名名单": {
          this.listOrderOfMyRankMember(true)
        }
          break;
        case "我的报名": {
          this.listMyOrder(true)
        }
          break;
        case "我的评论(活动)": {
          this.getMemberCommentList(true);
        }
          break;
        case "回复我的(活动)": {
          this.getMemberReplyList(true);
        }
          break;
        case "我的评论(动态)": {
          this.getMomentCommentList(true);
        }
          break;
        case "回复我的(动态)": {
          this.getMomentReplyList(true);
        }
          break;
        case "我的反馈": {
          this.getFeedback(true)
        }
          break;
        case "申请友链": {
          console.log("点击申请友链")
        }
          break;
        case "修改密码": {
          console.log("点击修改密码")
        }
          break;
      }
    },

    // 跳转到资源详情
    loadMore: function (type) {
      this.currentPage = this.currentPage + 1;
      switch (type) {
        case "memberComment": {
          this.getMemberCommentList(false)
        }
          break;
        case "memberReply": {
          this.getMemberReplyList(false)
        }
          break;
        case "momentComment": {
          this.getMemberCommentList(false)
        }
          break;
        case "momentReply": {
          this.getMemberReplyList(false)
        }
          break;
        case "feedback": {
          // this.getFeedback()
        }
          break;
        case "rankMember": {
          this.getRankMemberList(false)
        }
          break;
        case "myRankMemberOrder": {
          this.listOrderOfMyRankMember(false)
        }
          break;
        
      }
    },

    //弹出选择图片框
    checkPhoto() {
      this.imagecropperShow = true
    },
    /**
     * dateTimeStamp是一个时间毫秒，注意时间戳是秒的形式，在这个毫秒的基础上除以1000，就是十位数的时间戳。13位数的都是时间毫秒。
     * @param dateTimeStamp
     * @returns {string}
     */
    timeAgo(dateTimeStamp) {
      return timeAgo(dateTimeStamp)
    },

    timeFormat(gainTime) {
      if (gainTime) {
        return this.timeAgo(gainTime) + ' 获得'
      } else {
        return '暂未获得'
      }
    },

    cropSuccess(resData) {
      console.log("裁剪成功", resData)
      console.log("提现状态", this.drawDialogVisible)
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      if (this.activeName == "个人中心") {
        // 激活个人中心页面
        this.userInfo.photoUrl = resData.url
        this.userInfo.avatar = resData.uid
      } else if (this.activeName == "申请友链") {
        // 判断是申请友链页面
        let photoList = []
        photoList.push(resData.url);
        this.friendLink.photoList = photoList
        this.friendLink.fileUid = resData.uid
      }
    },

    deletePhoto: function (type) {
      switch (type) {
        case "user": {
          this.userInfo.photoUrl = null;
          this.userInfo.avatar = "";
          this.icon = false;
        }
          break;

        case "link": {
          this.friendLink.photoList = null;
          this.icon = false;
        }
          break;
      }
    },

    onCardEnterTd: function () {
      clearTimeout(this.leaveTimeout)
    },
    //鼠标离开的事件。
    onLeaveTd(nowClean) {
      console.log("触发离开配置")
      let that = this
      if (nowClean) {
        that.dialogHotSearchVisible = false;
      } else {
        this.leaveTimeout = setTimeout(() => {
          that.dialogHotSearchVisible = false;
        }, 500)
      }
    },

    close() {
      this.imagecropperShow = false
    },
    submitForm: function (type) {
      switch (type) {
        case "editUser": {
          this.$refs.userInfo.validate((valid) => {
            if (!valid) {
              console.log("校验失败")
            } else {
              editUser(this.userInfo).then(response => {
                if (response.code == this.$ECode.SUCCESS) {
                  this.$message({
                    type: "success",
                    message: response.data
                  })
                } else {
                  this.$message({
                    type: "error",
                    message: response.message
                  })
                }
              });
            }
          })
        }
          ;
          break;

        case "replyLink": {
          this.$refs.friendLink.validate((valid) => {
            if (!valid) {
              console.log("校验失败")
            } else {
              replyLink(this.friendLink).then(response => {
                if (response.code == this.$ECode.SUCCESS) {
                  this.$message({
                    type: "success",
                    message: response.data
                  })
                } else {
                  this.$message({
                    type: "error",
                    message: response.message
                  })
                }
              });
            }
          })
        }
          break;

        case "feedback": {
          let feedback = this.feedback
          if (feedback.title == undefined || feedback.title == "" || feedback.content == undefined || feedback.content == "") {
            this.$message({
              type: "error",
              message: "必填项不能为空"
            })
            return;
          }
          addFeedback(this.feedback).then(response => {
            if (response.code == this.$ECode.SUCCESS) {
              this.$message({
                type: "success",
                message: response.data
              })
              this.feedback = {}
              this.getFeedback()
            } else {
              this.$message({
                type: "error",
                message: response.message
              })
            }
          });
        }
          ;
          break;

        case "changePwd": {
          let newPwd = this.userInfo.newPwd
          let newPwd2 = this.userInfo.newPwd2
          let oldPwd = this.userInfo.oldPwd
          if (newPwd != newPwd2) {
            this.$message({
              type: "error",
              message: "两次密码不一致"
            })
            return
          }
          if (newPwd == oldPwd) {
            this.$message({
              type: "error",
              message: "新旧密码相同"
            })
            return
          }
          let params = new URLSearchParams()
          params.append("oldPwd", oldPwd)
          params.append("newPwd", newPwd)
          updateUserPwd(params).then(response => {
            if (response.code == this.$ECode.SUCCESS) {
              this.$message({
                type: "success",
                message: response.data
              })
            } else {
              this.$message({
                type: "error",
                message: response.message
              })
            }
            // 重置表单
            this.$refs.userInfoForm.resetFields()
          })
        }
          ;
          break;
      }
    },

    /**
     * 字典查询
     */
    getDictList: function () {
      let dictTypeList = ['sys_yes_no', 'sys_user_sex', 'sys_feedback_status', 'sys_editor_modal', 'sys_content_report_type', 'sys_original_status', 'sys_publish_status', 'sys_audit_status', 'sys_normal_disable']
      getListByDictTypeList(dictTypeList).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          let dictMap = response.data;
          this.genderDictList = dictMap.sys_user_sex.list
          this.yesNoDictList = dictMap.sys_yes_no.list
          this.feedbackDictList = dictMap.sys_feedback_status.list
          this.editorModalDictList = dictMap.sys_editor_modal.list
          this.commentReportDictList = dictMap.sys_content_report_type.list
          this.memberOriginalDictList = dictMap.sys_original_status.list
          this.memberPublishDictList = dictMap.sys_publish_status.list
          this.auditStatusDictList = dictMap.sys_audit_status.list
          this.openDictList = dictMap.sys_normal_disable.list
          

          if (dictMap.sys_content_report_type.defaultValue) {
            this.commentReportDictDefault = dictMap.sys_content_report_type.defaultValue;
          }
          let commentReportDict = {}
          commentReportDict.list = this.commentReportDictList
          commentReportDict.default = this.commentReportDictDefault
          this.setCommentReportDict(commentReportDict)
        }
      });
    },
    // 关闭个人中心
    closePersonCenter() {
      let url = window.location.href
      let replaceUrl = this.$commonUtil.ridUrlParam(url, ["action"])
      // 替换url不刷新
      history.replaceState(null, null, replaceUrl);
    },
    // 从url中获取个人中心类型
    getActionByUrl() {
      // 根据获取的动作，判断打开哪个页面
      let action = this.getUrllets()["action"];
      // 根据action，判断是否需要打开页面
      if (!action) {
        return
      }
      this.showPersonCenter(action)
    },
    showPersonCenter(action) {
      let actionHandle = this.actionHandle[action]
      if (!actionHandle) {
        return
      }
      // 有内容，首先打开个人中心页
      let tab = {
        "label": actionHandle,
      }
      this.activeName = actionHandle
      // 打开抽屉
      this.drawer = true;
      this.handleClick(tab, null)
    },
    getToken: function () {
      let token = this.getUrllets()["token"];
      // 判断url中是否含有token
      if (token) {
        // 设置token 31天过期
        setCookie("token", token, 31)
      } else {
        // 从cookie中获取token
        token = getCookie("token")
      }
      // 从url和cookie中获取token，在去校验
      if (token) {
        
        authVerify(token).then(response => {
          
          if (response && response.code == this.$ECode.SUCCESS) {
            this.isLogin = true;
            this.userInfo = response.data;
            
            this.setUserInfo(this.userInfo)
          } else {
            this.isLogin = false;
            delCookie("token");
          }
          
          this.setLoginState(this.isLogin);
          // 获取原页面地址，登录后进行跳转到原页面，如果为空或者就是在首页登录，不进行跳转
          const redirectUrl = getCookie("redirectUrl");
          if (redirectUrl != undefined && redirectUrl != "" && redirectUrl != "/") {
            window.location.href = redirectUrl;
            // 清除缓存的原页面地址
            delCookie("redirectUrl");
            return;
          }
        });
      } else {
        
        this.isLogin = false;
        this.setLoginState(this.isLogin);
      }
    },
    /**********文章 发布与下架  *************/
    handlePublish: function (row) {
      let that = this;
      if (row.isPublish == 1) {
        this.$confirm("此操作将下架博客, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let params = {};
          params.uid = row.uid;
          params.isPublish = 0;
          publishRankMember(params).then(response => {
            that.$commonUtil.message.success(response.message)
            that.getRankMemberList(true)
          });
        }).catch(() => {
          that.$commonUtil.message.info("已取消下架")
        });
      }
      if (row.isPublish == 0) {
        this.$confirm("此操作将发布博客, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let params = {};
          params.uid = row.uid;
          params.isPublish = 1;
          publishRankMember(params).then(response => {
            that.$commonUtil.message.success(response.message)
            that.getRankMemberList(true)
          });
        }).catch(() => {
          that.$commonUtil.message.info("已取消发布")
        });
      }
    },
    /**********取消某人报名  *************/
    organizerCancelOrder: function (row) {
      let that = this;
      this.$confirm("该操作将取消此人的报名, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let params = {};
          // uid和resourceUid都匹配上的订单才允许被取消，主要是为了严谨点
          params.uid = row.uid;
          params.resourceUid = row.resourceUid
          
          organizerCancelOrder(params).then(response => {
            that.$commonUtil.message.success(response.message)
            that.listOrderOfMyRankMember(true)
          });
        }).catch(() => {
          that.$commonUtil.message.info("已终止操作")
        });
    },
     /**********我自己取消报名  *************/
     cancelOrder: function (row) {
      let that = this;
      
        this.$confirm("请联系活动主办方，让活动主办方在【个人中心=>报名名单】中取消", "提示", {
          confirmButtonText: "确定",
          type: "warning"
        }).then(() => {
          
        }).catch(() => {
          
        });
      
    },
    handleAudit: function (row) {
      let params = row;
      params.isPublish = 1;
      editRankMember(params).then(response => {
        this.$commonUtil.message.success(response.message)
        this.getRankMemberList(true)
      });
    },
    /********************** 创作相关 ********************/
    createRankMember: function (isEdit, formData) {

      this.isEdit = isEdit
      if (isEdit) {
        this.formData = formData
      }
      if (!this.isLogin) {
        
        this.showLogin = true;
        return
      }
      /**
       * 修改 已审核过的文章  提示 将会使文章审核状态变更为未审核 进入重新审核流程
       */
      if (isEdit && formData.auditStatus == 2) {
        this.$confirm("修改已审核通过的文章,博客将会被重新审核, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.dialogFormVisible = true
        }).catch(() => {
          this.$commonUtil.message.info("已取消修改")
        });
      } else if (isEdit && formData.auditStatus == 1) {
        this.$confirm("请按照审核提示修改文章！重新提交博客后，将会被重新审核，是否继续? ", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.dialogFormVisible = true
        }).catch(() => {
          this.$commonUtil.message.info("已取消修改")
        });
      } else {
        this.dialogFormVisible = true
      }
    },
    // 关闭模态框回调函数
    beforeClose: function () {
      console.log("更新关闭")
      this.dialogFormVisible = false
      this.drawer = false
      this.$nextTick(() => {
        this.drawer = true
      })
    },
    /********************** 创作相关结束 ********************/

    /********************** 创作相关 ********************/
    
    /********************** 创作相关结束 ********************/

    /********************** 创作相关 ********************/
    
    /********************** 创作相关结束 ********************/

    setUserReceiveCommentCount: function () {
      getUserReceiveNoticeCount().then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.userReceiveMemberCommentCount = response.data.userReceiveMemberCommentCount
          this.userReceiveMomentCommentCount = response.data.userReceiveMomentCommentCount
          this.userReceivePraiseCount = response.data.userReceivePraiseCount
          this.userReceiveSystemCount = response.data.userReceiveSystemCount
          this.userReceiveWatchCount = response.data.userReceiveWatchCount
          this.userReceiveMessageCount = response.data.userReceiveMessageCount
          this.userReceiveCollectCount = response.data.userReceiveCollectCount
        }
      });
    },
    getKeyword: function () {
      let tempValue = decodeURI(this.getUrllets()["keyword"]);
      if (
        tempValue == null ||
        tempValue == undefined ||
        tempValue == "undefined"
      ) {
      } else {
        this.keyword = tempValue;
      }
    },
    /**
     * 获取当前所在页面的标题
     * @returns {{}}
     */
    getCurrentPageTitle: function () {
      // 判断是否是通过参数传递的title
      let title = this.getUrllets()["title"];
      console.log("获取url", title)
      if (title) {
        // 如果是通过参数传递，那么直接显示
        this.saveTitle = title;
      } else {
        // 从url中获取title
        let test = window.location.href;
        let start = 0;
        let end = test.length;
        for (let i = 0; i < test.length; i++) {
          if (test[i] == "/") {
            start = i;
          }
          if (test[i] == "?" && i > start) {
            end = i;
          }
        }
        let result = test.substring(start, end);
        this.saveTitle = result;
      }
    },
    /**
     * 获取网站配置
     */
    getWebConfigInfo: function () {
      let webConfigData = this.$store.state.app.webConfigData
      if (webConfigData.createTime) {
        this.contact = webConfigData;
        this.mailto = "mailto:" + this.contact.email;
        this.openComment = webConfigData.openComment
        document.title = this.info.title
        this.showCreateRankMember = webConfigData.openCreateRankMember == "1" ? true : false
        this.showChat = webConfigData.openChat == "1" ? true : false
      } else {
        getWebConfig().then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            this.info = response.data;
            console.log("this.info",this.info)
            // 存储在Vuex中
            this.setWebConfigData(response.data)
            this.openComment = this.info.openComment
            document.title = this.info.title
            this.showCreateRankMember = this.info.openCreateRankMember == "1" ? true : false
            this.showChat = this.info.openChat == "1" ? true : false
          }
        });
      }
    },
    // 获取用户权限码
    getUserAuthCodeList() {
      let userInfo = this.$store.state.user.userInfo
      console.log("获取用户信息", userInfo)
      if (userInfo) {
        let authCode = this.$commonUtil.InitUserAuthCode(userInfo.authCodeList)
        this.setAuthCode(authCode)
        this.authCode = authCode
        console.log("初始化用户信息", authCode)
      }
    },
    /**
     * 截取URL中的参数
     * @returns {{}}
     */
    getUrllets: function () {
      let lets = {};
      let url = window.location.href;
      url = decodeURI(url)
      let parts = url.replace(
        /[?&]+([^=&]+)=([^&#]*)/gi,
        function (m, key, value) {
          lets[key] = value;
        }
      );
      return lets;
    },


    clickSearchIco: function () {
      if (this.keyword != "") {
        this.search();
      }
      this.showSearch = !this.showSearch;
      //获取焦点
      this.$refs.searchInput.focus();
    },
    openHead: function () {
      this.showHead = !this.showHead;
    },
    returnTop: function () {
      window.scrollTo(0, 0);
    },
    userLogin: function () {
      this.showLogin = true;
    },
    userLogout: function () {
      deleteUserAccessToken(getCookie("token"));
      delCookie("token");
      let url = window.parent.location.href;
      let haveToken = url.indexOf("?token")
      if (haveToken != -1) {
        let list = url.split("?token");
        this.isLogin = false;
        window.location.href = list[0]
        let userInfo = {};
        this.setUserInfo(userInfo)
      } else {
        window.location.reload()
      }
    },

    // 点击头像触发的动作
    handleCommand(command) {
      switch (command) {
        case "logout" : {
          this.userLogout();
        }
          ;
          break;
        case "login" : {
          this.userLogin();
        }
          ;
          break;
        case "goUserCenter" : {
          this.$router.push({path: "/userCenter", query: {userUid: this.userInfo.uid}});
        }
          break;
        case "goUserInfo" : {
          // 打开抽屉
          this.drawer = true;
          //this.getUserAmountMethod()
        }
          break;
        case "createRankMember" : {
          // 创作博客
          this.createRankMember(false, null)
        }
          break;
        case "userMoment": {
          this.$router.push({path: "/moment"});
        }
          break;
        case "memberComment" : {
          if (!this.isLogin) {
            this.showLogin = true;
            return
          }
          // 判断用户是否未读的回复
          if (this.userReceiveMemberCommentCount > 0) {
            // 设置已阅读
            let params = {}
            params.noticeType = "1"
            this.readNotice()
            this.userReceiveMemberCommentCount = 0
          }
          this.setNoticeType("1")
          this.$router.push({path: "/notice", query: {noticeType: "1"}});
        }
          break;
        case "momentComment" : {
          if (!this.isLogin) {
            this.showLogin = true;
            return
          }
          // 判断用户是否未读的回复
          if (this.userReceiveMomentCommentCount > 0) {
            // 设置已阅读
            let params = {}
            params.noticeType = "2"
            this.readNotice()
            this.userReceiveMomentCommentCount = 0
          }
          this.setNoticeType("2")
          this.$router.push({path: "/notice", query: {noticeType: "2"}});
        }
          break;
        case "watch" : {
          if (!this.isLogin) {
            this.showLogin = true;
            return
          }
          // 设置已阅读
          let params = {}
          params.noticeType = "2"
          if (this.userReceiveWatchCount > 0) {
            this.readNotice()
            this.userReceiveWatchCount = 0
          }
          this.setNoticeType("2")
          this.$router.push({path: "/notice", query: {noticeType: "2"}});
        }
          break;
        case "praise" : {
          if (!this.isLogin) {
            this.showLogin = true;
            return
          }
          // 设置已阅读
          let params = {}
          params.noticeType = "3"
          if (this.userReceivePraiseCount > 0) {
            this.readNotice()
            this.userReceivePraiseCount = 0
          }
          this.setNoticeType("3")
          this.$router.push({path: "/notice", query: {noticeType: "3"}});
        }
          break;
        case "system" : {
          if (!this.isLogin) {
            this.showLogin = true;
            return
          }
          // 设置已阅读
          let params = {}
          params.noticeType = "4"
          if (this.userReceiveSystemCount > 0) {
            this.readNotice()
            this.userReceiveSystemCount = 0
          }
          this.setNoticeType("4")
          this.$router.push({path: "/notice", query: {noticeType: "4"}});
        }
          break;
        case "collect" : {
          if (!this.isLogin) {
            this.showLogin = true;
            return
          }
          // 设置已阅读
          let params = {}
          params.noticeType = "6"
          if (this.userReceiveCollectCount > 0) {
            this.readNotice()
            this.userReceiveCollectCount = 0
          }
          this.setNoticeType("6")
          this.$router.push({path: "/notice", query: {noticeType: "6"}});
        }
          break;
        case "message" : {
          this.goChat()
        }
          break;
        
      }
    },
    goChat() {
      if (!this.isLogin) {
        this.showLogin = true;
        return
      }
      // 设置已阅读
      let params = {}
      params.noticeType = "5"
      if (this.userReceiveMessageCount > 0) {
        this.readNotice()
        this.userReceiveMessageCount = 0
      }
      this.$router.push({path: "/chat"});
    },
    readNotice() {
      readUserReceiveNoticeCount().then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          // 阅读成功
          this.userReceiveSystemCount = 0
        }
      })
    },
    closeLoginBox: function () {
      this.showLogin = false;
    },
    // 获取浏览器类型, 用于兼容处理
    getBrowser() {
      let sBrowser, sUsrAg = navigator.userAgent;
      if (sUsrAg.indexOf("Firefox") > -1) {
        sBrowser = "Mozilla Firefox";
        this.browserFlag = 2;
        // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
      } else if (sUsrAg.indexOf("Chrome") > -1) {
        sBrowser = "Google Chrome or Chromium";
        this.browserFlag = 1;
        // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
      }
    },
  }
};
</script>

<style>
@import "../assets/css/emoji.css";

.emoji-panel-btn:hover {
  cursor: pointer;
  opacity: 0.8;
}

.emoji-item-common {
  background: url("../assets/img/emoji_sprite.png");
  display: inline-block;
  zoom: 0.3;
}

.emoji-item-common:hover {
  cursor: pointer;
}

.emoji-size-small {
  zoom: 0.3;
}

</style>

<style scoped>
/deep/ .el-timeline-item__timestamp {
  font-size: 14px;
  font-weight: 600;
  color: rgb(23, 35, 63);
}

.userDropdownMenuItem {
  padding: 0 0
}

.userDropdownMenu {
  padding: 0 0;
}


.isEnd {
  float: left;
  width: 100%;
  height: 80px;
  text-align: center;
}

.loadContent {
  border-radius: 25px;
  width: 120px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  margin: 0 auto;
  color: aliceblue;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.8);
}

.createRankMember {
  position: absolute;
  top: 16px;
  right: -20px;
}

.el-tag {
  height: 25px;
  line-height: 25px;
  margin-left: 6px;
}

#starlist li .title {
  color: #007fff;
}

.searchbox {
  position: absolute;
  right: 300px;
  top: 0;
  display: flex;
  flex-direction: column;
}

.searchboxDefault {
  position: absolute;
  right: 190px;
  top: 0
}

.create {
  width: 35px;
  height: 40px;
  position: absolute;
  right: 200px;
}

.notice {
  width: 35px;
  height: 35px;
  position: absolute;
  font-size: 24px;
  margin-top: 2px;
  right: 125px;
  cursor: pointer;
}

.userInfoAvatar {
  width: 35px;
  height: 35px;
  position: absolute;
  right: 70px;
  top: 12px;
}


.userInfoAvatar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}


.el-icon-bell:hover {
  color: #00ccff;
}


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  margin: 0, 0, 0, 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.imgBody {
  width: 100px;
  height: 100px;
  border: solid 2px #ffffff;
  float: left;
  position: relative;
}

.imgBody img {
  width: 100px;
  height: 100px;
}

.uploadImgBody {
  margin-left: 5px;
  width: 100px;
  height: 100px;
  border: dashed 1px #c0c0c0;
  float: left;
  position: relative;
}

.uploadImgBody :hover {
  border: dashed 1px #00ccff;
}

.inputClass {
  position: absolute;
}

.commentList {
  width: 100%;
  margin: 0 auto;
}

.commentList .p1 {
  float: left;
}

.commentList .left {
  display: inline-block;
  width: 10%;
  height: 100%;
}

.commentList .left img {
  margin: 0 auto;
  width: 100%;
  border-radius: 50%;
}

.commentList .right {
  display: inline-block;
  width: 85%;
  margin-left: 5px;
}

.commentList .rightTop {
  height: 30px;
}

.commentList .rightTop .userName {
  color: #303133;
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}

.commentList .rightTop .timeAgo {
  color: #909399;
  margin-left: 5px;
  font-size: 12px;
}

.commentList .rightCenter {
  margin-left: 20px;
  line-height: 30px;
  min-height: 60px;
}


.feedbackCard .item .title {
  display: inline-block;
  width: 70px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
}

.feedbackCard .item .content {
  display: inline-block;
  width: 240px;
  margin-bottom: 5px;
}

.myArticle .rankMemberPic {
  float: left;
  max-height: 170px;
  margin-right: 20px;
  display: block;
  overflow: hidden;
}

.myArticle .rankMemberPic img {
  width: 100%;
  max-height: 70px;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  margin-bottom: 10px;
}

.myArticle .rankMemberInfo {
  margin-top: 5px;
}

.myArticle .operation {
  float: right;
  margin-top: 3px;
  margin-left: 20px;
  height: 40px;
}

.search_ico2 {
  width: 60px;
  height: 60px;
  display: block;
  position: absolute;
  right: 0;
  top: 15px;
  padding: 0;
  margin: 0;
  line-height: 60px;
  cursor: pointer;
}

@media only screen and (min-width: 1346px) and (max-width: 1432px) {
  .searchbox {
    position: absolute;
    right: 360px;
    top: 0
  }

  .searchboxDefault {
    position: absolute;
    right: 250px;
    top: 0
  }

  .create {
    right: 280px;
  }

  .notice {
    right: 200px;
  }

  .userInfoAvatar {
    right: 150px;
  }
}

@media only screen and (min-width: 1135px) and (max-width: 1345px) {
  .searchbox {
    position: absolute;
    right: 550px;
    top: 0
  }

  .searchboxDefault {
    position: absolute;
    right: 500px;
    top: 0
  }

  .create {
    right: 470px;
  }

  .notice {
    right: 400px;
  }

  .userInfoAvatar {
    right: 350px;
  }
}

@media only screen and (min-width: 649px) and (max-width: 1134px) {
  .searchbox {
    position: absolute;
    right: 150px;
    top: -2px;
  }

  .create {
    right: 50px;
    display: none;
  }

  .notice {
    right: 100px;
    top: -2px;
  }

  .userInfoAvatar {
    width: 35px;
    height: 35px;
    position: absolute;
    right: 45px;
    top: 10px;
  }
}

@media only screen and (max-width: 649px) {
  .searchbox {
    position: absolute;
    right: 75px;
    top: -3px;
  }

  .create {
    right: 50px;
    display: none;
  }

  .notice {
    right: 45px;
    top: -4px;
  }

  .userInfoAvatar {
    width: 35px;
    height: 35px;
    position: absolute;
    right: 10px;
    top: 10px;
  }
}

</style>

<style lang="scss">
.codeContent {
  max-width: 400px;
  margin: 0 auto;
  padding-top: 25vh;
}

.code-copy-added {
  background-color: #282c34;
  color: white;
  padding: 2px 2px;
  margin: 10px 0;
  text-align: left;
  border-radius: 3px;
  position: relative;
}

.code-copy-added:hover .copy-btn {
  opacity: 1;
}

.gainImg {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
</style>
